<div class="wrapper">

    <div class="titles-wrap">
        <div ng-repeat="tab in $ctrl.tabs track by tab.value"
           class="title"
           ng-class="{'active': $ctrl.activeTab === tab.value}"
           ng-click="$ctrl.chooseTab(tab.value)">
            <span w-i18n="{{::tab.name}}"></span>
        </div>

        <w-select ng-model="$ctrl.dropDownId"
                  ng-class="{'active': $ctrl.isActiveSelect}"
                  class="select__no-user-select">
            <w-option ng-repeat="option in $ctrl.dropDown track by option.id"
                      value="::option.id">
                {{::option.name}}
            </w-option>
        </w-select>
        <div class="select-hover" ng-if="!$ctrl.isActiveSelect" ng-click="$ctrl.chooseSelect()"></div>
    </div>

    <div class="input-container" ng-if="$ctrl.activeTab !== 'trading'">
        <w-search class="search-wrapper">
            <input class="search-input"
                   type="w-search"
                   placeholder="directives.watchlist.placeholders.coin"
                   ng-model="$ctrl.search"
                   ng-model-options="{updateOn: 'input blur', debounce: { 'input': 500, 'blur': 0 }}"
                   ng-class="{'searching': $ctrl.searchInProgress }"
                   w-i18n-attr="placeholder">
        </w-search>
        <i ng-if="$ctrl.search.length > 0"
           class="input-clear"
           ng-click="$ctrl.search = ''"></i>
        <w-help-icon ng-if="!$ctrl.search.length">
            <div class="help-icon__row bold caption-2 basic-700" w-i18n="directives.watchlist.helpIcon.header"></div>
            <div ng-if="$ctrl.activeTab === 'all'" class="help-icon__row caption-2 basic-700">
                <div>
                    <span class="label-background" w-i18n="directives.watchlist.helpIcon.name"></span>
                    <span class="label-background" w-i18n="directives.watchlist.helpIcon.name1Name2"></span>
                </div>
                <div>
                    <span class="label-background" w-i18n="directives.watchlist.helpIcon.assetId"></span>
                    <span class="label-background" w-i18n="directives.watchlist.helpIcon.AssetId1AssetId2"></span>
                </div>
            </div>
            <div ng-if="$ctrl.activeTab !== 'all'" class="help-icon__row caption-2 basic-700">
                <span class="label-background" w-i18n="directives.watchlist.helpIcon.name"></span>/
                <span class="label-background" w-i18n="directives.watchlist.helpIcon.assetId"></span>
            </div>
            <div class="help-icon__row caption-2 basic-700" w-i18n="directives.watchlist.helpIcon.description"></div>
        </w-help-icon>
    </div>
    <w-loader ng-if="$ctrl.pending"></w-loader>
    <w-error-block ng-show="$ctrl.loadingError"></w-error-block>
    <w-smart-table ng-if="!$ctrl.pending"
                   name="watchlist"
                   options="$ctrl.tableOptions"
                   data="$ctrl.pairDataList"
                   header-info="$ctrl.headers"
                   class="smart-table">
        <div class="not-found basic-500" ng-if="$data && !$data.length && !$ctrl.loadingError">
            <span w-i18n="directives.watchlist.placeholders.noMarkets"></span>
        </div>
        <w-table-row ng-repeat="pair in $data track by pair.id"
                     ng-cloak
                     ng-click="$ctrl.choosePair(pair)"
                     ng-class="{'selected': $ctrl.isChosen(pair), 'disabled': $ctrl.isLockedPair(pair.amountAsset.id, pair.priceAsset.id)}">
            <w-table-cell>
                <i class="icon-fav"
                   ng-class="{'active': $ctrl.isFavourite(pair)}"
                   ng-click="$ctrl.toggleFavourite($event, pair)"
                ></i>
            </w-table-cell>
            <w-table-cell>
                <span>{{::pair.pairNames}}</span>
                <!--div class="tooltip-dex left">{{::pair.pairNames || '—'}}</div-->
            </w-table-cell>
            <w-table-cell>
                <span>{{pair.lastPrice.toFormat() || '—'}}</span>
            </w-table-cell>
            <w-table-cell ng-class="{'plus': pair.change24.gt(0),'minus': pair.change24.lt(0)}">
                <span>{{ pair.change24.toFormat() }}</span>{{ pair.change24 ? '%' : '—' }}
            </w-table-cell>
            <w-table-cell>
                <span ng-if="pair.volume"
                      w-nice-number="pair.currentVolume"
                      short-mode="::true"></span>
                <span ng-if="!pair.volume">—</span>
                <div ng-if="pair.volume && !$ctrl.isLockedPair(pair.amountAsset.id, pair.priceAsset.id)" class="tooltip-dex right">
                    <span ng-if="pair.volume" w-nice-number="pair.currentVolume"></span>
                    {{$ctrl.volumeAsset.displayName}}
                </div>
            </w-table-cell>
            <w-table-cell ng-if="$ctrl.isChosen(pair)" class="chosen">
                <div>
                    <a href="#"
                       ng-click="$ctrl.showAssetInfo($event, pair.amountAsset)"
                       class="basic-700">{{::pair.amountAsset.id}}</a> <span>/</span>
                </div>
                <a href="#"
                   ng-click="$ctrl.showAssetInfo($event, pair.priceAsset)"
                   class="basic-700">{{::pair.priceAsset.id}}</a>
            </w-table-cell>
            <div class="tooltip-dex tooltip-row center"
                 ng-if="$ctrl.isLockedPair(pair.amountAsset.id, pair.priceAsset.id)"
                 w-i18n="directives.watchlist.placeholders.lockedPair"
                 params="{
                     amountAssetTicker: pair.amountAsset.ticker || pair.amountAsset.displayName,
                     priceAssetTicker:  pair.priceAsset.ticker || pair.priceAsset.displayName
                 }"></div>
        </w-table-row>
    </w-smart-table>
</div>
